<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

    <style>
        body {
            background-color: bisque;
        }

        #app {
            width: 400px;
            height: 200px;
            border: solid 1px black;
            margin: 100px auto;
            text-align: center;
            background-color: black;
        }

        .nameDiv {
            margin-top: 10px;
            font-size: 70px;
            font-family: 楷体;
            background-color: black;
            color: yellow;

        }

        button {
            margin-top: 10px;
        }
    </style>


<body>
    <div id="app">

        <div class="nameDiv">

            <img v-bind:src="randomImage" width="100px" alt="">
            <span>{{randomName}}</span>
        </div>

        <div>
            <button @click="begin" :disabled="flag"> start </button>
            <button @click="end"> end </button>
        </div>
    </div>

</body>


<script>
    let studentArray = [{
            "id": 1,
            "name": "坤",
            img: "./img/11.jpg"
            // Image:"20231213224954.jpg"
        },
        {
            "id": 2,
            "name": "凡",
            img: "./img/22.jpg"
            // Image:"20231213224954.jpg"
        },
        {
            "id": 3,
            "name": "峰",
            img: "./img/11.jpg"
            // Image:"11.jpg"
        },
        {
            "id": 4,
            "name": "希",
            img: "./img/22.jpg"
            // Image:"11.jpg"
        }
    ];
    new Vue({
        data() {
            return {
                randomName: "坤坤",
                randomImage: '/img/11.jpg',
                flag: false,

            }
        },
        methods: {
            begin() {
                randomTask = setInterval(() => {
                    let RandomIndex = Math.floor(Math.random() * studentArray.length);
                    let randomStudent = studentArray[RandomIndex];
                    this.randomName = randomStudent.name;
                    this.randomImage = randomStudent.img;
                }, 500);

                this.flag = false;
            },
            end() {
                clearInterval(randomTask);
                this.flag = false;

            }
        },

    }).$mount("#app");
</script>
</html>
   